<!-- 外出详情 -->
<template>
  <div>
    <el-card style="width: 100%; margin: 0 auto">
      <div class="one">
        <div>老人信息</div>
        <div>待审批</div>
      </div>

      <div class="two">
        <div class="text">老人信息:</div>
        <div class="message">
          <div class="left">
            <div class="box">
              <div>头像:</div>
              <img :src="imgUrl + elderlyData.elderlyPhoto" alt="" style="width: 20px;height: 20px;border-radius: 50%;">
            </div>
            <div class="box">
              <div>房间号:</div>
              <div>{{ elderlyData.houseName }}</div>
            </div>
            <div class="box">
              <div>联系电话:</div>
              <div>{{ elderlyData.mobile }}</div>
            </div>
            <div class="box">
              <div>性别:</div>
              <div>{{ elderlyData.elderlyGender == '1' ? '男' : '女' }}</div>
            </div>
          </div>
          <div class="rgt">
            <div class="box">
              <div>身份证号:</div>
              <div>{{ elderlyData.elderlyIdCard }}</div>
            </div>
            <div class="box">
              <div>姓名:</div>
              <div>{{ elderlyData.elderlyName }}</div>
            </div>
            <div class="box">
              <div>床位号:</div>
              <div>{{ elderlyData.begName }}</div>
            </div>
            <div class="box">
              <div>家庭地址:</div>
              <div>{{ elderlyData.buildingName }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="three">
        <div class="type">
          <div>陪同人类型:</div>
          <div>{{ elderlyData.relation }}</div>
        </div>
        <div class="type">
          <div>陪同人姓名:</div>
          <div>{{ elderlyData.name }}</div>
        </div>
        <div class="type">
          <div>陪同人电话:</div>
          <div>{{ elderlyData.mobile }}</div>
        </div>
        <div class="type">
          <div>陪同人地址:</div>
          <div>{{ elderlyData.address }}</div>
        </div>
        <div class="type">
          <div>外出时间:</div>
          <div>{{ dayjs(elderlyData.startTime).format('YYYY-MM-DD') }}</div>
        </div>
        <div class="type">
          <div>计划返回时间:</div>
          <div>{{ dayjs(elderlyData.endTime).format('YYYY-MM-DD') }}</div>
        </div>
        <div class="type">
          <div>外出原因:</div>
          <div>{{ elderlyData.content }}</div>
        </div>
      </div>

      <div class="four">
        <div class="log">日志</div>
        <div class="list">
          <div class="item">
            <div class="left">
              <div class="top">
                <el-avatar style="margin-left: 2%;width: 24px;height: 24px;" :src="imgUrl + elderlyData.elderlyPhoto" />
                <div class="wire"></div>
              </div>
              <div class="txt">
                <div class="addtime">2024-12-07</div>
                <div style="font-size: 12px;">{{ elderlyData.elderlyName }} 登记了外出</div>
                <div style="font-size: 18px;">老人的状况不错，可以外出！</div>
                <div>
                  <img :src="imgUrl + elderlyData.elderlyPhoto" alt=""
                    style="width: 80px;height: 80px; margin-top: 20px;">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-button class="btn" @click="back">返回</el-button>
    </el-card>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { goOutGet } from '@/api/care/goOut/goOut'
import { useRoute, useRouter } from 'vue-router'
import { goListData } from '@/api/care/goOut/type';
import dayjs from 'dayjs';

const router = useRouter()
const route = useRoute()
let id = route.params.id as unknown as number

// 图片根路径
const imgUrl = import.meta.env.VITE_IMG_URL

// 获取单条数据
const elderlyData = ref<goListData>({
  id: 0,
  companyId: undefined,
  elderlyId: undefined,
  startTime: '',
  endTime: '',
  mobile: '',
  address: '',
  content: '',
  state: undefined,
  relation: '',
  name: '',
  addTime: '',
  addAccountId: undefined,
  addAccountName: '',
  begName: '',
  elderlyName: '',
  elderlyPhoto: '',
  elderlyGender: '',
  elderlyIdCard: '',
  houseName: '',
  buildingName: '',
  stateName: '',
  pictures: '',
  goBack: ''
})
const getData = async () => {
  let res = await goOutGet(id)
  elderlyData.value = res

}

// 返回
const back = () => {
  router.push('/care/goOut')
}

onMounted(() => {
  getData()
})

</script>

<style scoped lang="less">
.one {
  display: flex;
  justify-content: space-between;

  div:nth-child(1) {
    font-size: 18px;
    padding-left: 8px;
    border-left: 10px solid rgb(0, 177, 255);
  }

  div:nth-child(2) {
    font-size: 18px;
    color: rgb(204, 204, 204);
  }
}

.two {
  margin: 30px 0 80px 0;
  display: flex;

  .text {
    width: 130px;
    height: 32px;
    line-height: 32px;
    text-align: right;
    margin-right: 12px
  }

  .message {
    width: 100%;
    border: 1px solid #ccc;
    padding: 20px;
    display: flex;

    div {
      margin-right: 32px;

      .box {
        display: flex;
        margin-bottom: 10px;
        font-size: 14px;

        div:nth-child(1) {
          width: 70px;
          margin-right: 12px;
          text-align: right;
          color: rgb(107, 109, 112);
        }
      }
    }
  }
}

.three {
  .type {
    display: flex;
    margin-bottom: 18px;

    div:nth-child(1) {
      width: 130px;
      text-align: right;
      color: rgb(107, 109, 112);
      font-size: 14px;
      margin-right: 12px
    }

    div:nth-child(2) {
      font-size: 14px;
    }
  }
}

.four {
  margin: 100px 0 180px 0;

  .log {
    font-size: 18px;
    padding-left: 8px;
    border-left: 10px solid rgb(0, 177, 255);
  }

  .list {
    margin-top: 30px;

    .item {
      width: 472px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .left {
        display: flex;
        flex: 1;

        .top {
          position: relative;

          .wire {
            width: 2px;
            height: 204px;
            background-color: rgb(168, 171, 178);
            position: absolute;
            left: 50%;
            top: 24px;
          }
        }

        .txt {
          margin-left: 10px;
          font-size: 14px;

          div {
            margin-bottom: 12px
          }

          .addtime {
            font-size: 12px;
            margin-top: 5px
          }
        }
      }
    }
  }
}

.btn {
  display: flex;
  justify-content: center;
  margin: 0 auto
}
</style>
